var dom = document.getElementById("ODData");
var myChart = echarts.init(dom);
var geoCoordMap = {
    '火车北站路口': [104.0740,30.6950],
    '交大九里南门': [104.0540,30.6947],
    '宽窄巷子中心': [104.0530,30.6640],
    '动物园地铁口': [104.1030,30.7138],
    '电科沙河南门': [104.0972,30.6745]
};
var HCBZLKname = 'chengdu';
var JDJLNMname = 'jiaoda';
var KZXZZXname = 'xiangzi';
var DWYDTKname = 'animal';
var DKSHNMname = 'keda';
var HCBZLK = [];
var JDJLNM = [];
var DWYDTK = [];
var KZXZZX = [];
var DKSHNM = [];
// $.ajax({
//   type : "POST",
//   async : false,
//   url : "Servlet",
//   data:{},
//   dataType:"json",
//   success : function (result) {
//     for (var i = 0; i < result.length; i++){
//       if(result[i].pathId.split('2')[0] === HCBZLKname){
//
//       }
//     }
//   }
// });
var HCBZData = [
    [{name:'火车北站路口'},{name:'交大九里南门',value:23928}],
    [{name:'火车北站路口'},{name:'宽窄巷子中心',value:44801}],
    [{name:'火车北站路口'},{name:'动物园地铁口',value:36068}],
    [{name:'火车北站路口'},{name:'电科沙河南门',value:15852}]
];
var JDJLData = [
    [{name:'交大九里南门'},{name:'火车北站路口',value:21158}],
    [{name:'交大九里南门'},{name:'宽窄巷子中心',value:11989}],
    [{name:'交大九里南门'},{name:'动物园地铁口',value:3944}],
    [{name:'交大九里南门'},{name:'电科沙河南门',value:2502}]
];
var KZXZData = [
    [{name:'宽窄巷子中心'},{name:'交大九里南门',value:3090}],
    [{name:'宽窄巷子中心'},{name:'火车北站路口',value:13751}],
    [{name:'宽窄巷子中心'},{name:'动物园地铁口',value:6493}],
    [{name:'宽窄巷子中心'},{name:'电科沙河南门',value:1538}]
];
var DWYData = [
    [{name:'动物园地铁口'},{name:'交大九里南门',value:3865}],
    [{name:'动物园地铁口'},{name:'宽窄巷子中心',value:23480}],
    [{name:'动物园地铁口'},{name:'火车北站路口',value:47662}],
    [{name:'动物园地铁口'},{name:'电科沙河南门',value:1439}]
];
var DKSHData = [
    [{name:'电科沙河南门'},{name:'交大九里南门',value:2627}],
    [{name:'电科沙河南门'},{name:'宽窄巷子中心',value:2349}],
    [{name:'电科沙河南门'},{name:'动物园地铁口',value:1845}],
    [{name:'电科沙河南门'},{name:'火车北站路口',value:22593}]
];
var planePath = 'image://images/car2.png';
var convertData = function (data) {
    console.log(data);
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord],
                value: dataItem[1].value
            });
        }
    }
    return res;
};
//var color = ['#01d0fc', '#01d9b4', '#5f71f1','#f8436e','#f5b40d'];
//var color = ['#00FF99', '#FFFF66', '#46bee9','#6699FF','#FFCCFF'];
var color = ['#01d9b4', '#f8436e', '#5f71f1','#f5b40d','#FFCCFF'];
//var width1 = [9 , 3 , 5 , 7 , 1];
var series = [];
[['火车北站路口', HCBZData], ['交大九里南门', JDJLData], ['宽窄巷子中心', KZXZData],['动物园地铁口',DWYData],['电科沙河南门',DKSHData]].forEach(function (item, i) {
    //console.log(item,i);
    series.push(
        {         //线特效
            name: item[0],
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
                show: true,
                period: 4,
                // period: function (val) {
                //   return 4;
                // },
                trailLength: 0.2,
                symbol: planePath,
                symbolSize: 20
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.5,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {         //圆点特效
            name: item[0],
            type: 'effectScatter',
            coordinateSystem: 'geo',  //使用地理坐标系
            zlevel: 3,
            rippleEffect: {   //涟漪效果
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                    fontSize: 15,
                    color: '#fff'
                }
            },
            symbolSize: 20,
            itemStyle: {
                color: '#00CCCC'
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        }
    );
});
console.log(series);

myChart.setOption(option = {
    backgroundColor: '#000000',
    title : {
        text: '成都市网约车五热点迁徙图',
        left: 'center',
        textStyle : {
            color: '#fff'
        }
    },
    tooltip : {   //线路数据
        trigger: 'item',
        formatter:function(params, ticket, callback){
            console.log(params);
            if(params.seriesType=="effectScatter") {
                return "线路："+params.data.name+""+params.data.value[2];
            }else if(params.seriesType=="lines"){
                return params.data.fromName+"-->"+params.data.toName+"<br /> 订单数："+params.data.value;
            }else{
                return params.name;
            }
        }
    },
    legend: {   //图例组件
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['火车北站路口', '交大九里南门', '宽窄巷子中心','动物园地铁口','电科沙河南门'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'multiple',
    },
    geo: {    //地理坐标系组件
        map: '510100_sichuan_chengdu',
        //center: [104.08, 30.7005],
        label: {
            emphasis: {
                show: true,
                color:'#fff'
            }
        },
        roam: true,
        boundingCoords: [
            // 定位左上角经纬度
            [104.0400, 30.7200],
            // 定位右下角经纬度
            [104.1300, 30.6600]
        ],
        // aspectScale: 1,  //长宽比
        itemStyle: {
            normal: {
                areaColor: '#101010',
                borderColor: '#787878'
            },
            emphasis: {
                areaColor: '#181818'
            }
        }
    },
    series: series
});